<template>
	<view class="content">
		<!-- F1: 轮播图 -->
		<!-- 
		 indicator-dots  是否显示指示点
		 indicator-color  指示点颜色
		 indicator-active-color  当前选中的颜色
		 autoplay  是否自动切换
		 interval  间隔的时长
		 duration  动画播放时长
		 -->
		<swiper 
			:indicator-dots="true"
			indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#FFF"
			:autoplay="true"
			interval="3000"
			duration="200"
		>
			<swiper-item v-for="item in carouselList" :key="item.cid">
				<view class="carousel-container">
					<image 
						:src='baseURL + item.pic' 
						class="carousel"
						@click="jump(item.href)"
					></image>
				</view>
			</swiper-item>
			
		</swiper>
		<!-- F2: 八宫格 -->
		<!-- column 每行显示的列数 -->
		<uni-grid class="func-menu" :column="4">
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/propertyFee/propertyFee')">
					<image src="/static/img/rmb.png" mode="widthFix" />
					<text>物业缴费</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/parking/parking')">
					<image src="/static/img/parking.png" mode="widthFix" />
					<text>智慧停车</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/medical/medical')">
					<image src="/static/img/plus.png" mode="widthFix" />
					<text>社区医疗</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item" @click="jump('/pages/chatroom/chatroom')">
					<image src="/static/img/chat.png" mode="widthFix" />
					<text>邻里互动</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/door.png" mode="widthFix" />
					<text>开门</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/tools.png" mode="widthFix" />
					<text>保修</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/sound.png" mode="widthFix" />
					<text>公告</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="menu-item">
					<image src="/static/img/more.png" mode="widthFix" />
					<text>更多</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- F3: 商业服务 -->
		<uni-card title="| 商业服务" :isFull="true" class="card">
			<view class="service">
				<view class="service-item">
					<view class="txt">
						<text>房屋租售</text>
						<view>
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<image src="/static/img/chuzu.png" />
				</view>
				<view class="service-item">
					<view class="txt">
						<text>便民服务</text>
						<view>
							<navigator>便利店</navigator>
							<navigator>超市</navigator>
						</view>
					</view>
					<image src="/static/img/bianmin.png" />
				</view>
			</view>
		</uni-card>
	</view>
</template>
<script>
	import { indexCarousel, baseURL } from '../../service'
	export default {
		data() {
			return {
				carouselList: [],  // 保存轮播图数据
				baseURL, // 把基础服务器地址存到变量
			}
		},
		async onLoad() {
			// 页面组件挂载后执行
			uni.showToast({
				title: '登录成功',
				icon: 'none',
				duration: 3000
			})
			// 请求服务器
			const data = await indexCarousel()
			console.log(data)
			// 把结果中轮播图图数据保存
			this.carouselList = data.rows
		},
		methods: {
			// 接收到要跳转的地址
			jump(url) {
				// 跳转
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.carousel-container {
		
		.carousel {
			width: 750rpx;
			height: 300rpx;
		}
	}
	// F2:功能菜单
	.func-menu {
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-col-base;
		.menu-item {
			height: 100%;
			// 将弹性布局的主轴方向为纵向
			flex-direction: column;
			// 主轴方向居中对齐
			justify-content: center;
			// 交叉轴方向居中对齐
			align-items: center;
			image {
				width: 35%;
			}
			text {
				font-size: $uni-font-size-base;
				margin-top: $uni-spacing-col-sm;
			}
		}
	}
	// F3: 商业服务
	.card {
		flex-direction: column;
		margin-top: $uni-spacing-col-base !important;
		padding: 0 !important;
	}
	.service {
		width: 100%;
		.service-item {
			flex: 1;
			// 交叉轴垂直对齐
			align-items: center;
			&:first-child {padding-right: $uni-spacing-row-base;}
			&:last-child {padding-left: $uni-spacing-row-base;}
			.txt {
				flex-direction: column;
				flex: 1;
				text {
					font-weight: bold;
				}
				navigator {
					margin-right: $uni-spacing-row-sm;
				}
			}
			image {
				width: 150rpx;
				height: 100rpx;
			}
		}
	}
</style>
